﻿@model Northwind.Model.Employee
@{ ViewBag.Title = "jEditable in ASP.NET MVC - Employee"; }
Title Of Courtesy: <u>@Model.TitleOfCourtesy</u><br />
First Name: <u>@Model.FirstName</u><br />
Last Name: <u>@Model.LastName</u><br />
Title: <b class="edit" id="Title">@Model.Title</b><br />
Address: <b class="edit" id="Address">@Model.Address</b><br />
Postal Code: <b class="edit" id="PostalCode">@Model.PostalCode</b><br />
City: <b class="edit" id="City">@Model.City</b><br />
Country: <b class="edit-select" id="Country">@Model.Country</b><br />
Notes: <i class="edit-area" id="Notes">@Model.Notes</i><br />
<br /><br /><button id="Submit">Submit</button>
@section JavaScript {
    <script src="@Url.Content("~/Scripts/jquery.jeditable.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.json-2.2.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            window.Employee = {
                Id: '@Model.Id',
                Title: '@Model.Title',
                Address: '@Model.Address',
                PostalCode: '@Model.PostalCode',
                City: '@Model.City',
                Country: '@Model.Country',
                Notes: '@Model.Notes'
            };
        })(jQuery);

        $(document).ready(function () {
            //Standard 'text' inputs
            $('.edit').editable($.updateEmployee, {
                //Element tooltip
                tooltip: 'Click to edit...',
                //Input style
                style: 'display: inline'
            });
            $('.edit-select').editable($.updateEmployee, {
                //Options for select (you can use loadurl if you want to request data from server)
                data: "{'USA':'USA','UK':'UK'}",
                //Type
                type: 'select',
                //Text for accept button
                submit: 'Accept',
                //Element tooltip
                tooltip: 'Click to edit...',
                //Select style
                style: 'display: inline'
            });
            $('.edit-area').editable($.updateEmployee, {
                //Type
                type: 'textarea',
                //Text for cancel button
                cancel: 'Cancel',
                //Text for accept button
                submit: 'Accept',
                //Element tooltip
                tooltip: 'Click to edit...',
                //TextArea style
                style: 'display: inline'
            });
            $('#Submit').click(function () {
                $.ajax({
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    url: '@Url.Action("Employee", "Home")',
                    dataType: 'json',
                    data: $.toJSON(window.Employee)
                });
            });
        });

        $.updateEmployee = function (value, settings) {
            //Based on the current element, we update the corresponding property of employee
            switch ($(this).attr('id')) {
                case 'Title':
                    window.Employee.Title = value;
                    break;
                case 'Address':
                    window.Employee.Address = value;
                    break;
                case 'PostalCode':
                    window.Employee.PostalCode = value;
                    break;
                case 'City':
                    window.Employee.City = value;
                    break;
                case 'Country':
                    window.Employee.Country = value;
                    break;
                case 'Notes':
                    window.Employee.Notes = value;
                    break;
            }
            //We have to return string, it will be put into element for displaying
            return (value);
        }
    </script>
}